<template>
<div class="img-push-list views-container">
    <div class="wlm-table">
        <div class="wlm-table-content flex-row">
            <el-table :ref="tableFormatData.userTable.key" :data="tableFormatData.userTable.tableData" @selection-change="handleSelectionChange" style="width: 60%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="date" label="用户">
                    <template slot-scope="scope">
                        <div class="flex-row">
                            <img width="50" height="50" :src="scope.row.avatarUrl || $store.getters.usersAvatar" style="margin-right:10px;">
                            <div class="text-left">
                                <p>{{scope.row.nickName || '-'}}</p>
                                <!-- <p>{{`ID：${scope.row.user_id}` || '-'}}</p> -->
                                <el-tooltip class="item" effect="dark" :content="sourceType[`${scope.row.source}`]" placement="top">
                                    <img height="20" width="20" :src="sourceImg[`${scope.row.source || '-'}`]" alt="">
                                </el-tooltip>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="用户名">
                    <template slot-scope="scope">
                        <span>{{scope.row.nickName}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="联系方式">
                    <template slot-scope="scope" v-if="scope.row['mobile']">
                        <span>{{scope.row.mobile || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="最后一次交互">
                    <template slot-scope="scope">
                        <span>{{scope.row.last_interactive_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="是否关注">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.have_in_wechat=='1'" type="success">已关注</el-tag>
                        <el-tag v-else type="info">未关注</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <div style="width:40%;padding:0 20px;">
                <el-form ref="userForm" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="top">
                    <el-input size="small" @keyup.enter.native="filesSerch" v-model="tableFormatData.userTable.files.keyword" placeholder="请输入昵称或手机号" style="width:100%;">
                      <el-button slot="append" icon="el-icon-search" @click="filesSerch"></el-button>
                    </el-input>
                    <el-form-item label="图文内容" prop="name">
                        <el-select style="width:100%;" size="small" @change="typeChange" v-model="formFormatData.formData.type">
                            <el-option label="文本" value="text">
                            </el-option>
                            <el-option label="图文" value="imgtext">
                            </el-option>
                            <el-option label="模板消息" value="template">
                            </el-option>
                            <el-option label="图片" value="image">
                            </el-option>
                            <el-option label="小程序卡片" value="sappCard">
                            </el-option>
                        </el-select>
                         <choose-files ref="chooseFiles" v-if="formFormatData.formData.type=='image'" :config="chooseLogoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                        <el-input v-if="formFormatData.formData.type=='text'" style="margin-top:10px;" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 6, maxRows: 6}" v-model.trim="formFormatData.formData.content">
                        </el-input>
                        <el-select v-if="formFormatData.formData.type=='imgtext'" style="width:100%;margin-top:10px;" size="small"  v-model="formFormatData.formData.imgtext_id">
                            <el-option v-for="(item) in categoryData" :key="item.imgtext_id" :label="item.title" :value="item.imgtext_id">
                            </el-option>
                        </el-select>
                        <el-select v-if="formFormatData.formData.type=='template'" style="width:100%;margin-top:10px;" size="small" v-model="formFormatData.formData.t_id">
                            <el-option v-for="(item) in tempData" :key="item.t_id" :label="item.title" :value="item.t_id">
                            </el-option>
                        </el-select>
                        <el-select v-if="formFormatData.formData.type=='sappCard'" style="width:100%;margin-top:10px;" size="small" v-model="formFormatData.formData.sapp_card_id">
                            <el-option v-for="(item) in cardData" :key="item.id" :label="item.title" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-button style="width:100%;margin-bottom:10px;" size="small" @click="saveSend" type="primary">发送</el-button>
                <el-button style="width:100%;" size="small" @click="saveSendAll" type="danger">全部发送</el-button>
                <div class="card-body" v-if="formFormatData.formData.type!='template'">
                    <p>触发交互的时机：</p>
                    <p>1、用户发送信息</p>
                    <p>2、点击自定义菜单（仅有点击推事件、扫码推事件、扫码推事件且弹出“消息接收中”提示框这3种菜单类型是会触发客服接口的）</p>
                    <p>3、关注公众号</p>
                    <p>4、扫描二维码</p>
                    <p>5、支付成功</p>
                    <p>6、开启公众号上报地理位置，打开公众号即交互</p>
                    <p>推送建议：</p>
                    <p>每天1次推送最多不要超过3次，以免造成用户反感。</p>
                </div>
            </div>
        </div>
        <div class="pagination-content flex-row flex-justify-e flex-align-c">
            <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.userTable.pagination.page" :page-sizes="tableFormatData.userTable.pagination.pagesizes" :page-size.sync="tableFormatData.userTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.userTable.pagination.total : 0">
            </el-pagination>
        </div>
    </div>
</div>
</template>

<script>
import {
  sappCardIndex
} from '@/api/application'
import {
  applyDelete
} from '@/api/distribution'
import {
  userList
} from '@/api/user'
import {
  pushMessage,
  imgtextIndex,
  templateIndex
} from '@/api/application'
import mixins from '@/mixins/mixins'
import ChooseFiles from '@/components/ChooseFiles/index'
export default {
  mixins: [mixins.getters('Table'), mixins.getters('Form')],
  name: 'ImgPushList',
  components: {
    ChooseFiles
  },
  created() {
    imgtextIndex({ index: 'all' }).then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      this.categoryData = msgData
      console.log(this.categoryData)
    })
    templateIndex({ index: 'all' }).then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      this.tempData = msgData
      console.log(this.tempData)
    })
    sappCardIndex({ list_rows: 'all' }).then(res => {
      const {
        data: {
          data: msgData = []
        }
      } = res
      this.cardData = msgData
      console.log(this.cardData, '==============')
    })
  },
  data() {
    return {
      categoryData: [],
      tempData: [],
      cardData: [],
      changeMsg: 'pushMessage',
      dialogVisibleImg: false,
      openDialogText: '',
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: userList,
            delList: applyDelete
          },
          tableData: [],
          files: {
            have_in_wechat: '1',
            ids: [],
            checkall: '0',
            Recycle: '1'
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      },
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          // limit: 1,
          isLocal: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'image',
          model: 'img'
        }
      },
      formFormatData: {
        key: 'userForm',
        model: {
          noCreateEdit: false
        },
        api: {
          editForm: {
            api: pushMessage,
            params: {
              id: ''
            },
            filters: {
              img: {
                bindInit: ['chooseLogoConfig']
              }
            }
          },
          submitForm: pushMessage
        },
        formData: {
          ids: [],
          t_id: '',
          imgtext_id: '',
          type: 'text',
          all_user: '',
          content: '',
          sapp_card_id: '',
          image: []
        },
        rules: {

        }
      }
    }
  },
  methods: {
    typeChange(val) {
      console.log(val)
      if (val === 'template') {
        this.tableFormatData.userTable.files.have_in_wechat = []
        this.tableFormatData.userTable.files.template_user = '1'
        this.filesSerch()
      } else {
        this.tableFormatData.userTable.files.have_in_wechat = '1'
        this.tableFormatData.userTable.files.template_user = []
        this.filesSerch()
      }
    },
    openDialog(params) {
      this.openDialogText = params
      this.dialogVisibleImg = true
    },
    saveSend(params) {
      var array = []
      this.tableFormatData.userTable.files.ids.map((item) => {
        array.push(item.user_id)
      })
      this.formFormatData.formData.ids = array
      this.formFormatData.formData.all_user = []
      this.formFormatSubmit()
      // setTimeout(() => {
      //   this.$message({
      //     showClose: true,
      //     duration: 3000,
      //     message: '消息已加入队列，请等待!',
      //     type: 'success'
      //   })
      // }, 800)
    },
    saveSendAll(params) {
      this.formFormatData.formData.all_user = '1'
      this.formFormatSubmit()
      // setTimeout(() => {
      //   this.$message({
      //     showClose: true,
      //     duration: 3000,
      //     message: '消息已加入队列，请等待!',
      //     type: 'success'
      //   })
      // }, 800)
    }
  }
}
</script>

<style lang="scss" scoped>
.img-push-list {
    .card-body {
        padding: 20px 20px;
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        margin-bottom: 20px;
        border-radius: 4px;
        margin-top: 20px;
        font-size: 14px;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    }
}
</style>

